<template>
	<view class="container container24934">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column">
			<image src="/static/global/cat.jpg" class="response diygw-col-24" mode="widthFix"></image>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz">
			<view class="flex diygw-col-24 items-center flex-nowrap flex2-clz">
				<view class="diygw-col-5 text-clz"> {{ datarows.petName }} </view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
				<view class="flex flex-wrap diygw-col-24 flex-direction-column">
					<view class="diygw-title flex diygw-col-24">
						<view class="title title-title font-normal"> <text class="title-icon diy-icon-home"></text>
						{{ datarows.publishType==0?"寻找爱宠":"寻找主人" }}
						</view>
					</view>
				</view>
				<view class="diygw-title flex diygw-col-24">
					<view class="title title1-title font-normal"> <text class="title1-icon diy-icon-baidu"></text> 
					{{ datarows.pettype=='猫'?'猫猫':'狗狗' }}
					</view>
				</view>
				<view class="diygw-title flex diygw-col-24">
					<view class="title title2-title font-normal"> <text class="title2-icon diy-icon-time"></text>
						{{ formattedDate(datarows.time)}} </view>
				</view>
				<view class="diygw-title flex diygw-col-24">
					<view class="title title3-title font-normal"> <text class="title3-icon diy-icon-location"></text> 
					{{ datarows.address }}
					</view>
				</view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex6-clz">
				<u-form-item class="diygw-col-24" labelPosition="top" prop="textarea">
					<u-input maxlength="200" height="90px" class="text14-clz" placeholder="请输入提示信息" v-model="textarea"
						type="textarea"></u-input>
				</u-form-item>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column flex7-clz">
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz">
				<view class="diygw-col-24 text3-clz"> 联系人 </view>
			</view>
			<view class="flex diygw-col-24 items-center flex-nowrap flex9-clz">
				<view class="flex diygw-col-4">
					<view class="diygw-avatar radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/avatar.png"></image>
					</view>
				</view>
				<view class="diygw-col-9 text4-clz"> {{ datarows.name }} </view>
				<view class="flex diygw-col-2" @click="copyRight(datarows.phone)">
					<view class="diygw-avatar xs radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/phone.png"></image>
					</view>
				</view>
				<view class="diygw-col-3" @click="copyRight(datarows.phone)"> 电话 </view>
				<view class="flex diygw-col-2" @click="copyRight(datarows.vx)">
					<view class="diygw-avatar xs radius bg-none">
						<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/weixin.png"></image>
					</view>
				</view>
				<view class="diygw-col-4" @click="copyRight(datarows.vx)"> 微信 </view>
			</view>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column flex14-clz">
				<image src="/static/action1.jpg" class="response diygw-col-24" mode="widthFix" @tap="navigateTo"
					data-id="modal" data-type="openmodal"></image>
			</view>
		</view>
		<view class="flex diygw-col-24 diygw-bottom">
			<view class="diygw-grid diygw-actions">
				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view class="diygw-grid-icon diygw-avatar" style="">
							<image mode="aspectFit" class="diygw-avatar-img" src="/static/collect.png"></image>
						</view>
						<view class="diygw-grid-title"> 收藏 </view>
					</view>
				</button>

				<button class="diygw-action">
					<view class="diygw-grid-inner">
						<view v-if="!isExist" class="flex diygw-col-18">
							<button class="diygw-btn orange radius-xl flex-sub margin-xs button-button-clz" @click="talkTo()">私信</button>
						</view>
						<view v-if="isExist" class="flex diygw-col-18">
							<button class="diygw-btn diygw-line-orange radius-xl flex-sub margin-xs button-button-clz">已私信</button>
						</view>
						<!-- <view class="diygw-grid-title"> 菜单三 </view> -->
					</view>
				</button>
			</view>
		</view>
		<view class="diygw-modal basic" :class="modal" style="z-index: 100000">
			<view class="diygw-dialog diygw-dialog-modal basis-lg">
				<view class="justify-end diygw-bar">
					<view class="content"> 长按识别添加 </view>
					<view class="action" data-type="closemodal" data-id="modal" @tap="navigateTo">
						<i class="diy-icon-close"></i>
					</view>
				</view>
				<view>
					<image mode="aspectFit" class="" src="/static/user/wxjwh.jpg"></image>
				</view>
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				textarea: '',
				modal: '',
				id: 0,
				datarows: {},
				isExist:''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}
			this.id = option.id
			this.init();
		},
		methods: {
			async init() {
				this.resultApi()
				this.isCheck()
			},
			async resultApi() {
				const id = this.id
				const http_url = '/selectpet/' + id
				const result = await this.$http.get(http_url)
				const data = result.data
				this.datarows = data
				
				this.textarea = this.contentTransform(data.remark)
				const publish_data =await this.getPublisher()		
				this.datarows['vx'] = publish_data.vx
				this.datarows['address'] = publish_data.address
				this.datarows['phone'] = publish_data.phone
				this.datarows['name'] = publish_data.name
				console.log(this.datarows)
			},
			async getPublisher() {
				const id = this.id
				const http_url = '/selectpet/getPublisher/' + id
				const result = await this.$http.get(http_url)
				const data = result.data
				console.log(data)
				return data
			},
			contentTransform(content) {
				const maxLength = 180; // 指定的字符数
				if (content.length <= maxLength) {
					return content; // 如果内容长度小于等于指定字符数，则直接返回原内容
				} else {
					return content.substring(0, maxLength) + '...'; // 使用 substring 方法截取指定字符数，并添加省略号
				}
			},
			copyRight(params) {
				uni.setClipboardData({
					data: params,
					success() {
						uni.showToast({
							title: "复制成功",
							icon: "success"
						});
					}
				});
			},
			formattedDate(time){
				
				const date = new Date(time);
				const timestamp = date.toLocaleString(); 
				return timestamp
			},
			talkTo(){
				const token = uni.getStorageSync('token')
				if(token){
					this.message(token)
				}else{
					uni.showToast({
						title: '请先登录',
						icon: 'error',
						duration: 2000
					});
					uni.switchTab({
						url:'/pages/user/index'
					})
				}
			},
			async isCheck(){
				const token = uni.getStorageSync('token')
				const data={
					"orderId":this.id
				}
				const header={
					"Token":token
				}
				const http_url = '/orderUser/check' 
				const result =await this.$http.get(http_url,data,header)
				const isExist = result.data
				if(isExist){
					this.isExist="true"
				}
			},
			async message(token){
				const http_url = '/orderUser'
				const data={
					"orderId":this.id,
					"status":2,
					"type":"select"
				}
				const header={
					'content-type': 'application/json;charset=UTF-8',
					"Token":uni.getStorageSync('token')
				}
				const result =await this.$http.post(http_url,data,header)
				const code = result.code
				if(code==200){
					uni.showToast({
						title: '已私信',
						icon: 'success',
						duration: 2000
					});
				}
			}
		},
		onPullDownRefresh() {
			this.init()
		},

	};
</script>

<style lang="scss" scoped>
	.flex1-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 20rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding-right: 10rpx;
	}

	.flex2-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text-clz {
		font-weight: bold;
		font-size: 38rpx !important;
	}

	.flex4-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 20rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 20rpx;
		margin-right: 10rpx;
		background-color: #eeeeee;
		margin-left: 10rpx;
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		border-top-left-radius: 20rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 10rpx;
		padding-right: 10rpx;
	}

	.title-title {
		font-size: 18px;
	}

	.title-more {
		font-size: 20px;
	}
	
	.text14-clz {
		font-size: 28rpx !important;
	}

	.title1-title {
		font-size: 18px;
	}

	.title1-more {
		font-size: 20px;
	}

	.title2-title {
		font-size: 18px;
	}

	.title2-more {
		font-size: 20px;
	}

	.title3-title {
		font-size: 18px;
	}

	.title3-more {
		font-size: 20px;
	}

	.flex6-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex7-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 20rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 20rpx;
		margin-right: 0rpx;
		margin-left: 0rpx;
		box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 0rpx - 0rpx) !important;
		border-top-left-radius: 20rpx;
		margin-top: 20rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 0rpx;
		padding-right: 10rpx;
	}

	.flex8-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text3-clz {
		font-weight: bold;
		font-size: 32rpx !important;
	}

	.flex9-clz {
		margin-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text4-clz {
		font-weight: bold;
	}

	.flex14-clz {
		margin-left: 10rpx;
		border-bottom-left-radius: 12rpx;
		overflow: hidden;
		width: calc(100% - 10rpx - 10rpx) !important;
		border-top-left-radius: 12rpx;
		margin-top: 10rpx;
		border-top-right-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.container24934 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.container24934 {
		padding-bottom: 80px;
	}
</style>